<template>

  <div class="register-page-wrapper">
    <el-icon class="back" @click="onBack">
      <ArrowLeft />
    </el-icon>
    <div class="register-page">
    <img src="@/assets/logo@2x.png" alt="logo" />
    <h2 style="text-align: center">{{$t("signUp.register")}} iQuiz</h2>
    <div class="register-page-form">
      <el-form ref="form" label-width="90"
               style="width: 62%"
               :model="formData"
               :rules="rules"
               @submit.prevent="onSubmit"
               size="large"
               label-position="top">
        <el-form-item :label="$t('signUp.mail')" prop="username" required>
          <el-input type="text" :max="50" v-model="formData.username" :min="1" :placeholder="$t('signUp.input')" />
        </el-form-item>
        <el-form-item :label="$t('signUp.password')" prop="password" required>
          <el-input type="text" v-model="formData.password" show-password :max="50" :min="1" :placeholder="$t('signUp.input')" />
        </el-form-item>
        <el-form-item :label="$t('signUp.repeatPwd')" prop="repeatPassword" required>
          <el-input type="text" v-model="formData.repeatPassword" show-password :max="50" :min="1" :placeholder="$t('signUp.input')" />
        </el-form-item>
        <el-form-item label-width="0" style="text-align: center">
          <el-button :loading="loading" class="buttons-primary" native-type="submit" style="margin:10px auto;">
            {{$t("signUp.confirm")}}
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import { ArrowLeft } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import {fetchRegister} from "@/http/user";
import { mailValid, passwordValidation } from "@/libs/register-rule";
import { useI18n } from "vue-i18n";

interface FormData {
  username: string;
  password: string;
  repeatPassword: string;
}
const form = ref<FormInstance>();
const formData = reactive<FormData>({
  username: "",
  password: "",
  repeatPassword: ""
});
const loading = ref(false);
const {t} = useI18n();
const repeatPasswordValidation = (t:any) => {
  return (rule: any, value: any, callback: any)=> {
    if (value === formData.password) {
      callback();
    } else callback(new Error(t("signUp.diffPwd")));
  }
};
const rules = reactive<FormRules>({
  username: [
    { required: true, message: t("signUp.noMail"), trigger: ["change", "blur", "input"] },
    { trigger: 'blur',validator: mailValid(t) },
  ],
  password: [{ validator: passwordValidation(t), trigger: ["change", "blur", "input"] }, {
    required: true,
    message:  t("signUp.required")
  }, { min: 6, message: t("signUp.emailMinLength") + " " + 6 }, {
    max: 50,
    message: t("signUp.emailMaxLength"),
    trigger: ["change", "blur", "input"]
  }],
    repeatPassword: [
      { required: true, message:t("signUp.required"), trigger: ["change", "blur", "input"] },
      {  trigger: 'blur',validator: repeatPasswordValidation(t) },
    ]
},
);
const onSubmit = async () => {
  if(form.value) {
    await form.value.validate((res) => {
      if(res){
        const finalData = {
          username: formData.username,
          password: formData.password
        }
        loading.value = true;
        fetchRegister(finalData).then(res=>{
         if(res?.code === 200){
           router.push("/login")
         } else ElMessage.error(res?.msg)
        }).finally(()=> loading.value = false)
      }
    })
  }
}
const router = useRouter();
const onBack = ()=> {
  router.back();
}
</script>
<style scoped lang="scss">
@import "@/theme.scss";

.back {
  position: fixed;
  left: 50px;
  top: 30px;
  z-index: 1;
  font-size: 30px;
  color: #525252;
  padding: 8px;
  background-color: rgba(0,0,0,.2);
  border-radius: 50%;
}
.back:hover {
  background-color: rgba(0,0,0,.4);
  cursor: pointer;
  color: #fff;
}
.register-page-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-color: #fff;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  img {
    width: 400px;
    transform: translateY(30px);
  }
  .register-page {
    transform: translateY(-5vh);
  }
  .register-page-form {
    width: 400px;
    min-height: 300px;
    border: 1px solid #ccc;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: center;
    padding-top: 30px;
    border-radius: 12px;

  }
}
</style>
